<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>千图网</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        nav {
            width: 100vw;
            height: 50px;
            background-color: #10c55b;
        }

        header {
            width: 1200px;
            margin: 0 auto;
        }

        .clear {
            clear: both;
        }

        .sy {
            float: left;
            color: white;
            line-height: 45px;
            padding: 0 12px;
            margin-left: 10px;
            text-align: center;
            height: 50px;
            font-size: 18px;
        }

        .sy:hover {
            background-color: #01ac48;
        }

        .vip {
            float: right;
            color: white;
            line-height: 45px;
            height: 50px;
            margin-right: 20px;
            padding: 0 10px;
            margin-left: 10px;
            font-size: 18px;
        }

        .vip:hover {
            background-color: #01ac48;
        }

        #vip {
            margin-left: 0px;
        }

        .zhuanshi {
            width: 20px;
            height: 20px;
            background-image: url(common.png);
            background-position: -7px -415px;
            float: left;
            margin-right: 5px;
            margin-top: 12px;
        }

        #denglu {
            width: 60px;
            height: 30px;
            background-color: #01923d;
            margin: 10px;
            text-align: center;
            font-size: 15px;
            line-height: 30px;
            border-radius: 5px;
        }

        #zhuce {
            height: 15px;
            display: block;
            float: right;
            font-size: 1vh;
            color: black;
            text-decoration: none;
            margin: 15px;
        }

        .input {
            width: 100vw;
            height: 125px;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .logo {
            float: left;
            margin: -5px auto;
        }

        .download {
            width: 590px;
            height: 50px;
            border-radius: 5px;
        }

        .quanzhan {
            float: left;
            margin-top: 8px;
            padding: 5px 10px 5px 15px;
        }

        #input {
            padding: 15px 320px 15px 15px;
            outline: medium;
            border: none;
        }

        .second {
            width: 580px;
            height: 46px;
            margin-top: 20px;
            margin-left: 250px;
            border: 1px solid black;
        }

        .sousuo {
            width: 80px;
            height: 50px;
            border-radius: 5px;
            background-color: #11cc5f;
            position: relative;
            float: right;
            margin-right: 290px;
            margin-top: -49px;
        }

        #sousuo {
            width: 20px;
            height: 20px;
            margin-left: 15px;
            margin-top: 20px;
            background-color: #11cc5f;
            background-image: url(common.png);
            background-position: -67px -445px;
            margin: 20px auto;
            position: absolute;
            top: -5px;
            left: 20px;
        }

        .font {
            width: 820px;
            height: 20px;
            margin-left: 250px;
        }

        .xiaozi {
            margin-right: 9px;
            font-size: 13px;
        }

        .xiaozi:hover {
            color: #30cd71;
        }

        #qixi {
            color: #30cd71;
        }

        #icon {
            color: #30cd71;
        }

        #qiuji {
            color: #30cd71;
        }

        #ppt {
            color: #30cd71;
        }

        #zhuangshihua {
            color: #30cd71;
        }

        .container {
            width: 1200px;
            height: 320px;
        }

        .banner {
            width: 1200px;
            position: absolute;
            height: 320px;
            float: left;
        }

        .left {
            width: 100vw;
            height: 320px;
            background-color: black;
            position: absolute;
        }

        .xiaodian {
            width: 120px;
            height: 20px;
            position: absolute;
            margin: 300px 540px;
        }

        .xd span {
            display: block;

            width: 12px;
            height: 12px;
            border-radius: 6px;
        }

        .xd span.xiaodian2 {
            background-color: #10c55b;
        }

        .xd {
            width: 12px;
            height: 12px;
            float: left;
            border-radius: 6px;
            margin-right: 3px;
            margin-top: 2px;
            background-color: white;
        }

        .special1 {
            font-size: 60px;
            display: block;
            height: 140px;
            width: 50px;
        }

        .special1:hover {
            cursor: pointer;
        }

        #last {
            float: left;
            margin-top: 100px;
            line-height: 140px;
        }

        #next {
            margin-top: 100px;
            line-height: 140px;
            float: right;
        }

        main {
            width: 1200px;
            margin: 50px auto;
        }

        .biaoti {
            background-image: url(common.png);
            background-position: -96px -415px;
            width: 30px;
            height: 30px;
            float: left;
        }

        #biaoti {
            display: block;
            width: 100px;
            /* height:30px; */
            margin-left: 40px;
            font-size: 25px;
        }

        .bilion {
            display: block;
            height: 30px;
            float: left;
            margin-left: 150px;
            margin-top: 5px;
            color: black;
        }

        .bilion:hover {
            color: red;
        }

        .more {
            display: block;
            float: right;
            padding-left: 300px;
        }

        .more:hover {
            color: red;
        }

        .total {

            width: 1200px;
            height: 40px;
            /* border: 1px solid black; */
            /* padding-bottom:20px; */
        }

        #love {
            width: 1200px;
            height: 240px;
        }

        .love {
            float: left;
            margin-top: 20px;
            margin: 20px 10px 0px 0px;
        }

        .news {
            width: 1200px;
            height: 500px;
            /* border: 1px border-style color; */
        }

        .fire {
            background-image: url(common.png);
            width: 30px;
            height: 30px;
            background-position: -126px -415px;
            /* background-color: pink; */
            margin-top: 10px;
            float: left;
        }

        .shangyong {
            display: block;
            width: 100px;
            height: 30px;
            margin-left: 40px;
            font-size: 25px;
            margin-top: 0px;
        }

        #peitu {
            width: 500px;
            height: 15px;
            margin-top: 15px;
            margin-left: 140px;
            float: left;
        }

        .peitu {
            display: block;
            width: 80px;
            height: 15px;
            float: left;
            color: black;
        }

        .peitu:hover {
            color: red;
        }

        #qixi {
            width: 1200px;
            margin: 0 auto;
        }

        .qixi {
            float: left;
            width: 290px;
            margin-right: 10px;
        }

        .xuegao {
            display: block;
            font-size: 14px;
            color: black;
        }

        .wenyi {
            width: 290px;
            color: black;
        }

        .foot {
            width: 1200px;
            margin: 100px auto;
        }

        .last {
            width: 200px;
            float: left;
            color: black;
        }

        .qiantu {
            display: block;
            margin: 2px 0;
            color: black;
            width: 80px;
        }

        .guanyu {
            font-size: 25px;
            color: black;
        }

        .qiantu:hover {
            color: greenyellow;
        }

        .guanyu:hover {
            color: greenyellow;
        }

        .tel {
            display: block;
            color: black;
        }

        .banner img {
            display: none;
        }

        .banner img.show1 {
            display: block;
        }
    </style>
</head>

<body>
    <nav>
        <header>
            <ul>
                <a href="">
                    <li class="sy">首页</li>
                </a>
                <a href="">
                    <li class="sy">所有分类<span class="and">&and;<span></li></a>
            <a href=""><li class="sy">设计创意</li></a>
            <a href=""><li class="sy">办公创意</li></a>
            <a href=""><li class="sy">.&nbsp.&nbsp.</li></a>
        </ul>
        <ul>
            <a href="" id="zhuce">免费注册</a>  
            <a href=""><li id="denglu" class="vip">请登录</li></a>
            <a href=""><li id="vip" class="vip">VIP中心
            <div class="zhuanshi"></div></li></a>
        </ul>
        </header>
    </nav>
    <div class="input">
        <div class="container">
        <a href=""><img class="logo" src="logo.png" alt=""></a>  
        <div class="second"><input id="input" type="text" placeholder="800万免费设计素材任意下载">
        <a href=""><div class="quanzhan">全站<span class="and">&or;</span></div>
                </a>
                </div>
                <div class="sousuo">
                    <a href="">
                        <div id="sousuo"></div>
                </div>
                </a>
                <div class="font"><a href=""><span class="xiaozi">热门搜索：</span></a><a href=""><span class="xiaozi" id="qixi">七夕</span></a>
                    <a href=""><span class="xiaozi">详情页</span></a><a href=""><span class="xiaozi" class="qixi">icon</span></a>
                    <a href=""><span class="xiaozi">主图</span><a href=""><span class="xiaozi" id="qiuji">秋季</span><a href=""><span class="xiaozi" id="ppt">PPT模板</span></a>
                    <a href=""><span class="xiaozi">EXCEL模板</span></a><a href=""><span class="xiaozi">首页</span></a>
                    <a href=""><span class="xiaozi">个人简历</span></a>
                    <a href=""><span class="xiaozi" id="zhuangshihua">装饰画</span></a>
                </div>
                </a>
                </div>
                </div>
                <div class="lbt">
                    <ul class="left">
                        <div><span class="special1" id="last">&lt</span><span class="special1" id="next">&gt</span></div>
                        <div class="clear"></div>
                    </ul>
                    <ul class="container">
                        <a href="">
                            <li class="banner"><img class="show1 " src="banner01.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src=" banner02.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner03.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner04.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner05.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner06.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner07.jpg" alt=""></li>
                        </a>
                        <a href="">
                            <li class="banner"><img src="banner08.jpg" alt=""></li>
                        </a>
                        <div class="xiaodian">
                            <div class="xd"><span class="xiaodian2"></span></div>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                            <a href="">
                                <div class="xd"><span></span></div>
                            </a>
                        </div>
                    </ul>
                </div>
                <main>
                    <div class="total">
                        <div class="biaoti"><span id="biaoti">精选专题</span></div>
                        <a href=""><span class="bilion">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</span></a>
                        <a href=""><span class="more">更多 >></span></a>
                        <div class="clear"></div>
                        <ul id="love">
                            <li class="love"><a href=""><img src="jxzt01.jpg" alt=""></a></li>
                            <li class="love"><a href=""><img src="jxzt02.jpg" alt=""></a></li>
                            <li class="love"><a href=""><img src="jxzt03.jpg" alt=""></a></li>
                            <li class="love"><a href=""><img src="jxzt04.jpg" alt=""></a></li>
                        </ul>
                        <div id="news">
                            <div class="fire"><span class="shangyong">商用海报</span></div>
                            <div id="peitu">
                                <a href=""><span class="peitu">招聘海报</span></a>
                                <a href=""><span class="peitu">配图海报</span></a>
                                <a href=""><span class="peitu">企业文化</span></a>
                                <a href=""><span class="peitu">促销海报</span></a>
                                <a href=""><span class="peitu">原创插画</span></a>
                            </div>
                            <div class="clear"></div>
                            <span class="more">更多>></span>
                        </div>
                        <div class="clear"></div>
                        <ul id="qixi">
                            <a href="">
                                <li class="qixi"><img class="wenyi" src="syhb01.jpg" alt=""><span class="xuegao">超清新雪糕夏日凉爽海报</span></li>
                            </a>
                            <a href="">
                                <li class="qixi"><img class="wenyi" src="syhb02.jpg" alt=""><span class="xuegao">文艺夏日时光菠萝蓝色简约海报设计微信配图</span></li>
                            </a>
                            <a href="">
                                <li class="qixi"><img class="wenyi" src="syhb03.jpg" alt=""><span class="xuegao">七夕情人节扁平风创意简约商业海报设计模板</span></li>
                            </a>
                            <a href="">
                                <li class="qixi"><img class="wenyi" src="syhb04.jpg" alt=""><span class="xuegao">我的前半生文艺情感配图海报设计</span></li>
                            </a>
                        </ul>
                </main>
                <div class="clear"></div>
                <div class="foot">
                    <hr>
                    <ul>
                        <li class="last">
                            <a href=""><span class="guanyu">常见问题</span></a>
                            <a href=""><span class="qiantu">成为特邀设计师</span></a>
                            <a href=""><span class="qiantu">成为原创贡献者</span></a>
                            <a href=""><span class="qiantu">注册登录</span></a>
                            <a href=""><span class="qiantu">帐号/密码</span></a>
                            <a href=""><span class="qiantu">充值/售后</span></a>
                            <a href=""><span class="qiantu">版权投诉</span></a>
                        </li>
                        <li class="last">
                            <a href=""><span class="guanyu">关于千图网</span></a>
                            <a href=""><span class="qiantu">关于我们</span></a>
                            <a href=""><span class="qiantu">媒体报道</span></a>
                            <a href=""><span class="qiantu">加入我们</span></a>
                            <a href=""><span class="qiantu">心系千图</span></a>
                            <a href=""><span class="qiantu">每日更新</span></a>
                        </li>
                        <li class="last">
                            <a href=""><span class="guanyu">产品服务</span></a>
                            <a href=""><span class="qiantu">官方博客</span></a>
                            <a href=""><span class="qiantu">帮助中心</span></a>
                            <a href=""><span class="qiantu">千图导航</span></a>
                        </li>
                        <li class="last">
                            <a href=""><span class="guanyu">友情链接</span></a>
                            <a href=""><span class="qiantu">我图网</span></a>
                            <a href=""><span class="qiantu">千库网</span></a>
                            <a href=""><span class="qiantu">摄图网</span></a>
                            <a href=""><span class="qiantu">包图网</span></a>
                            <a href=""><span class="qiantu">视达网</span></a>
                            <a href=""><span class="qiantu">更多>></span></a>
                        </li>
                        <li class="last">
                            <a href=""><span class="guanyu">客服咨询</span></a>
                            <span class="tel">400-998-7011(9:00-18:00)</span>
                            <a href=""><span class="tel">feedback@58pic.com</span></a>
                            <a href=""><span class="tel">点我交谈</span></a>
                        </li>
                    </ul>
                </div>
</body>

</html>
<script>
    var lbt = document.querySelectorAll(".banner>img");
    var xiaodian = document.querySelectorAll(".xd>span");
    var color = document.querySelector(".left");
    var lunbotu = document.querySelector(".lbt");
    var special = document.querySelectorAll('.special1');
    var index = 0;
    var arr = ["rgb(9, 9, 9)", "rgb(255, 255, 15)", "rgb(253, 241, 0)",
        "rgb(48,156,255)", "rgb(137, 220, 228)", "rgb(255, 248, 196)",
        "rgb(16, 1,4)", "rgb(244, 202, 216)"];
    function pre() {
        index = index == 0 ? lbt.length - 1 : index - 1;
        show();
    }
    function xyg() {
        index = index == lbt.length - 1 ? 0 : index + 1;
        show();
    }
    function show() {
        for (i = 0; i < lbt.length; i++) {
            lbt[i].className = "";
            xiaodian[i].className = "";
        }
        lbt[index].className = "show1";
        xiaodian[index].className = "xiaodian2";
        color.style.backgroundColor = arr[index];
    }
    console.log(special);
    var timer = setInterval(xyg, 1000);
    //  图片跟着小点切换;
    for (var i = 0; i < xiaodian.length; i++) {
        xiaodian[i].index = i;
        xiaodian[i].onmouseover = function () {
            console.log(index);
            index = this.index;
            show();
        }
    }
    lunbotu.onmouseover = function () {
        clearInterval(timer);
        special.className = "";
        special.className = "special2";
    }
    lunbotu.onmouseout = function () {
        timer = setInterval(xyg, 1000);
    }
    last.onclick = function () {
        pre();
        cursor: hand;
    }
    next.onclick = function () {
        xyg();
        cursor: "hand";
    }

</script>